<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { ref, onMounted } from "vue";
import { getShopListAPI } from "@/server/api/ShopFollow";
import { useUseStore } from "@/stores/user";
import { getShopList, } from "@/server/api/shopApi.js";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const useStore = useUseStore();

const limit = ref(60);
const page = ref(1);

const ShopList = ref()
const FollowList = ref([]);

const pageSize = ref(9)
const currentPage = ref(1)


const getShopListOrFun = async (data) => {
  const res = await getShopListAPI(data);

  console.log(res);
};


const getShopListFun = async (l, p, u) => {
  const res = await getShopList(l, p, u)
  if (res.data.code === 200) {
    ShopList.value = res.data.data.list
  }
}

const RouterLIn = (shopId) => {
  router.push({
    path: `/StoreOrder`,
    query: {
      shopId,
    },
  });
}

onMounted(() => {

  getShopListFun(limit.value, page.value, useStore.userId)


});
</script>

<template>
  <TopButtonCenter title="Publish Store" />
  <div class="ManageShopList">
    <ul class="list">
      <li v-for="(i, index) in ShopList" :key="index">
        <header>
          <diV class="left">
            <div class="login">
              <img v-lazy="i.userImage || `/images/pipayshop_logo.png`" alt="" />
            </div>
            <div class="right_tex" @click="RouterLIn(i.shopId)">
              <h5>{{ i.shopName }}</h5>
              <div class="totol">
                {{ i.follows }} Fans
                <div style="margin-left: 20rem; display: inline-block">
                  {{ i.score }}
                  <van-rate v-model="i.score" :size="15" :count="i.score ? Number(String(i.score)[0]) : 0"
                    color="#ffd21e" void-icon="star" void-color="#eee" readonly />
                </div>
              </div>
              <img class="clickImg" src="/images/click.png">
            </div>
          </diV>

        </header>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.ManageShopList {
  font-size: 14rem;
  padding: 60rem 10rem 0;

  .list {
    li {

      header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 30rem;
        padding: 10rem 0;
        align-items: center;
        border-bottom: 1rem solid #d2d2d2;

        //上下架按钮
        .off {
          width: 100rem;
          height: 35px;
          right: 0px;
          /* 设置圆角半径 */
          border-radius: 20px;
          border: 2px solid purple;
          background-color: transparent;
        }

        .left {
          display: flex;
          flex: 1;

          .right_tex {
            line-height: 35rem;
            margin: 0 10rem;

            >h5 {
              font-size: 16rem;
              font-weight: 500;
            }

            .totol {
              color: #d2d2d2;
            }

            .clickImg {
              width: 30rem;
            }
          }

          .login {
            width: 70rem;
            height: 70rem;
            overflow: hidden;
            border-radius: 50%;

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }
  }
}
</style>